<template>  
    <div class="container">  
      <h1>{{ title }}</h1>  
      <p>{{ message }}</p>  
      <button @click="reverseMessage">Reverse Message</button>  
    </div>  
  </template>  
    
  <script>  
  import { ref, onMounted } from 'vue';  
    
  export default {  
    setup() {  
      const title = ref('Welcome to question page');  
      const message = ref('Hello, Vue!');  
    
      const reverseMessage = () => {  
        message.value = message.value.split('').reverse().join('');  
      };  
    
      return {  
        title,  
        message,  
        reverseMessage,  
      };  
    },  
  };  
  </script>  
    
  <style scoped>  
  .container {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    height: 100vh;  
    background-color: #f0f0f0;  
  }  
    
  h1 {  
    color: #333;  
  }  
    
  button {  
    padding: 10px 20px;  
    background-color: #007bff;  
    color: white;  
    border: none;  
    border-radius: 5px;  
  }  
  </style>